<!DOCTYPE html>
<html>
<head>
    {include file="public/header" /}
    <style>
        .layui-upload-drag .layui-icon {
            font-size: initial;
            color: rgb(0, 150, 136);
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form layui-form-pane" style="float: left;width: 50%">
    <div class="layui-form-item">
        <label class="layui-form-label required">玩家名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" lay-reqtext="玩家名称不能为空" placeholder="请输入玩家名称" value="" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label required">玩家手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" lay-verify="required|phone" lay-reqtext="手机号不能为空" placeholder="请输入玩家手机号" value="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="idnumber"  placeholder="请输入身份证号" autocomplete="off" value="" class="layui-input">
        </div>
        <label class="layui-form-label required">注册日期</label>
        <div class="layui-input-inline">
            <input type="text" name="register_time" id="date" lay-verify="datetime|required" placeholder="注册日期" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">玩家等级</label>
        <div class="layui-input-inline">
            <input type="hidden" name="level" id="levelHidden" lay-verify="required">
            <input type="text" placeholder="请选择玩家等级" autocomplete="off" readonly class="layui-input" id="level">
        </div>
        <label class="layui-form-label ">所属团队</label>
        <div class="layui-input-inline">
            <input type="hidden" name="team_id" id="teamHidden">
            <input type="text" placeholder="请选择所属团队" autocomplete="off" readonly class="layui-input" id="team">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">性别</label>
        <div class="layui-input-inline">
            <input type="radio" name="sex" value="1" title="男" checked="">
            <input type="radio" name="sex" value="2" title="女">
        </div>
        <label class="layui-form-label ">年龄</label>
        <div class="layui-input-inline">
            <input type="number" name="age" placeholder="请输入年龄"  autocomplete="off" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">地区选择</label>
        <div class="" id="area-picker">
            <div class="layui-input-inline" style="width: 163px">
                <select name="province" class="province-selector" lay-filter="province-1">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 164px">
                <select name="city" class="city-selector" lay-filter="city-1">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 163px">
                <select name="area" class="county-selector" lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">收款-支付宝</label>
        <div class="layui-input-inline">
            <input type="text" name="ali_number" placeholder="请输入支付宝账号"  autocomplete="off" value="" class="layui-input">
        </div>
        <label class="layui-form-label ">收款-微信</label>
        <div class="layui-input-inline">
            <input type="text" name="wx_number" placeholder="请输入微信号"  autocomplete="off" value="" class="layui-input">
        </div>
    </div>
    <!--<div class="layui-form-item">
        <label class="layui-form-label ">收款-银联</label>
        <div class="layui-input-inline">
            <input type="text" name="unionpay_number" placeholder="请输入银联账号"  autocomplete="off" value="" class="layui-input">
        </div>
        <label class="layui-form-label ">银联-开户名</label>
        <div class="layui-input-inline">
            <input type="text" name="bank_people" placeholder="请输入开户名"  autocomplete="off" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">银联-开户行</label>
        <div class="layui-input-inline">
            <input type="text" name="bank" placeholder="请输入开户行"  autocomplete="off" value="" class="layui-input">
        </div>
        <label class="layui-form-label required">开户行地址</label>
        <div class="layui-input-inline">
            <input type="text" name="bank_address" placeholder="请输入开户行地址"  autocomplete="off" value="" class="layui-input">
        </div>
    </div>-->
    <input type="hidden" id="idcardHidden" name="idcard" >
    <input type="hidden" id="aliHidden" name="ali_img" >
    <input type="hidden" id="wxHidden" name="wx_img" >
    <input type="hidden" id="headHidden" name="head_portrait" >
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<div class="layui-form layuimini-form layui-form-pane" style="float: left">
    <div class="layui-form-item">
        <label class="layui-form-label ">玩家头像</label>
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="headImg">
                <i class="layui-icon"><img class="layui-upload-img headImage" style="width: 115px;" src="" id="head_portrait"></i>
                <p id="headText">点击上传玩家头像，或将图片拖拽到此处</p>
            </div>
        </div>
        <label class="layui-form-label ">身份证照片</label>
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="idcardImg">
                <i class="layui-icon"><img class="layui-upload-img headImage" style="width: 115px;" src="" id="idcard"></i>
                <p id="idcardText">点击上传身份证照片，或将图片拖拽到此处</p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">支付宝-收款码</label>
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="aliImg">
                <i class="layui-icon"><img class="layui-upload-img headImage" style="width: 115px;" src="" id="ali_img"></i>
                <p id="aliText">点击上传支付宝-收款码，或将图片拖拽到此处</p>
            </div>
        </div>
        <label class="layui-form-label ">微信-收款码</label>
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="wxImg">
                <i class="layui-icon"><img class="layui-upload-img headImage" style="width: 115px;" src="" id="wx_img"></i>
                <p id="wxText">点击上传微信-收款码，或将图片拖拽到此处</p>
            </div>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script>
    layui.use(['form', 'laydate', 'tableSelect', 'layarea', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            tableSelect = layui.tableSelect,
            layarea = layui.layarea,
            upload = layui.upload,
            $ = layui.$;
        /*注册日期*/
        laydate.render({
            elem: '#date',
            type: 'datetime'
        });
        /*玩家等级*/
        tableSelect.render({
            elem: '#level',
            searchKey: 'title',
            checkedKey: 'level',
            searchPlaceholder: '名称搜索',
            table: {
                url: '/admin/Member/memberLevelInfo?action=ajax',
                method: 'post',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data, //解析数据列表
                    };
                },
                cols: [[
                    {type: 'radio'},
                    {field: 'level', title: '等级', sort: true},
                    {field: 'title', title: '名称', sort: true},
                ]],
                page: true,
                limits: [15, 20, 25, 30, 50, 100],
                limit: 15
            },
            done: function (elem, data) {
                var NEWJSON = [];
                var levelHidden = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.title)
                    levelHidden.push(item.level)
                })
                elem.val(NEWJSON.join(","))
                $('#levelHidden').val(levelHidden.join(","))
            }
        });
        /*所属团队*/
        tableSelect.render({
            elem: '#team',
            searchKey: 'title',
            checkedKey: 'id',
            searchPlaceholder: '名称搜索',
            table: {
                url: '/admin/Member/teamInfo?action=ajax',
                method: 'post',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data, //解析数据列表
                    };
                },
                cols: [[
                    {type: 'radio'},
                    {field: 'title', title: '团队名称', sort: true},
                    {field: 'team_num', title: '团队人数', sort: true},
                    {field: 'income', title: '团队总收益', sort: true},
                ]],
                page: true,
                limits: [10, 15, 20, 25, 30, 50, 100],
                limit: 10
            },
            done: function (elem, data) {
                var NEWJSON = [];
                var teamHidden = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.title)
                    teamHidden.push(item.id)
                })
                elem.val(NEWJSON.join(","))
                $('#teamHidden').val(teamHidden.join(","))
            }
        });
        /*城市级联*/
        layarea.render({
            elem: '#area-picker',
            change: function (res) {
            }
        });
        /*玩家头像*/
        var uploadInst = upload.render({
            elem: '#headImg',
            url: '/admin/Industry/Doupload',
            size: 51200000,
            field: 'headImg',
            accept: 'images',
            acceptMime: 'image/*',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#head_portrait').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'headImg',
                    'oldSrc': $("#headHidden").val()
                };
            },
            done: function (res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                $("#headHidden").val(res.src);
                var demoText = $('#headText');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#headText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
        });
        /*身份证照片*/
        var uploadidcardInst = upload.render({
            elem: '#idcardImg',
            url: '/admin/Industry/Doupload',
            size: 51200000,
            field: 'idcardImg',
            accept: 'images',
            acceptMime: 'image/*',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#idcard').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'idcardImg',
                    'oldSrc': $("#idcardHidden").val()
                };
            },
            done: function (res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                $("#idcardHidden").val(res.src);
                var demoText = $('#idcardText');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#idcardText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadidcardInst.upload();
                });
            },
        });
        /*支付宝-收款码*/
        var uploadAliInst = upload.render({
            elem: '#aliImg',
            url: '/admin/Industry/Doupload',
            size: 51200000,
            field: 'aliImg',
            accept: 'images',
            acceptMime: 'image/*',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ali_img').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'aliImg',
                    'oldSrc': $("#aliHidden").val()
                };
            },
            done: function (res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                $("#aliHidden").val(res.src);
                var demoText = $('#aliText');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#aliText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadAliInst.upload();
                });
            },
        });
        /*微信收款码*/
        var uploadWxInst = upload.render({
            elem: '#wxImg',
            url: '/admin/Industry/Doupload',
            size: 51200000,
            field: 'wxImg',
            accept: 'images',
            acceptMime: 'image/*',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#wx_img').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'wxImg',
                    'oldSrc': $("#wxHidden").val()
                };
            },
            done: function (res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                $("#wxHidden").val(res.src);
                var demoText = $('#wxText');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#wxText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadWxInst.upload();
                });
            },
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                url: '/admin/Member/add?action=ajax',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    if (res.status == true) {
                        // 关闭弹出层
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                        window.parent.location.reload();
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function () {
                    layer.msg("报错了");
                }
            });

            return false;
        });

    });
</script>
</body>
</html>